<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .account {
                width: 300px;
                margin: 0px auto;
            }
        </style>
        <link rel="stylesheet" href="/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.css" />
        <title>Document</title>
    </head>
    <body>

        {% include 'app01/nav_bar.html' %}
        <div class="account">
            <form id='f1'>
                {% for field in objs %}
                    {% if field.name == 'code' %}
                    <div class="form-group">
                            <label for="{{ field.id_for_label }}">{{ field.label }}</label> 
                            <div class="clearfix">
                                <div class="col-md-6" style="padding-left: 0;">{{ field }}</div>
                                <div class="col-md-6"><input type="button" class="btn btn-default" value="点击获取验证码" id='code_btn' onclick="submitCode();"></div>
                            </div>
                    </div> 
                    {% else %}
                        <div class="form-group">
                            <label for= "{{ field.id_for_label }}">{{field.label}}</label> 
                            {{field}}
                        </div>
                    {% endif %}
                {% endfor %}
                <!-- <button type="submit" class="btn btn-default">Submit</button> -->

                <table>
                    <tr>
                        <td><a onclick="submitForm();"class="btn btn-default" >登录</a></td>
                        <td style="display: block; width:120px; height:15px; text-align: right"> </td>
                        <td><a href="app01/login/sms" target="_blank" class="btn2" style="display: block; width:130px; height:15px; text-align: left">使用短信验证码登录</a></td>
                    </tr>
                </table>

            </form>
        <div>
        <script src="/static/jquery-1.12.4.js"></script>
        <script>
            function submitForm(){
                $('.errmsg').remove();
                //var email=$('input[name="email"]').val();
                //var var_nm1 = $.cookie('csrftoken');
                var username = $('#id_username').val();
                var email= $('#id_email').val();
                var password= $('#id_password').val();
                var confirm_password= $('#id_confirm_password').val();
                var mobile_phone= $('#id_mobile_phone').val();
                var code= $('#id_code').val();

                    $.ajax({
                        url: '/app01/login/',
                        type: 'POST',
                        //headers:{'X-CSRFToken': token},
/*                        
                        data: { "username":username,
                                'email':email,
                                "password":password,
                                'confirm_password':confirm_password,
                                'mobile_phone':mobile_phone,
                                'code':code
                                },
  */                  
                        data:$('#f1').serialize(),
                        dataType:'JSON',
                        success:function(arg){
                            console.log(arg);
                            if(arg.status){
                                windows.locaiton = 'app01/index'    

                            }
                            else{
                                $.each(arg.msg, function(index,value){
                                    console.log(index,value);
                                    var tag = document.createElement('span');
                                    tag.innerHTML =value[0];
                                    tag.className='errmsg';
                                   //if (index=='__all__'){
                                   //     index = 'confirm_password'
                                   // }
                                    console.log('input[name="'+index+'"]');
                                    $('#f1').find('input[name="'+index+'"]').after(tag);
                                })
                                
                            }    

                        }
                    })
                }


        </script>
    </body>
</html>